<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
    <div class="hearder-search mb-10">
        <el-button type="primary" @click.native="addFoodCate" size="small">添加菜品类目</el-button>
        <span class="allbook">总 {{page.total}} 条数据</span>
    </div>
    <!--本体列表，数据 -->
    <div class="table-body">
      <div class="table-body-box">
        <el-table
                ref="multipleTable"
                :data="arryList"
                :stripe="tableoption.tableStripe"
                :border="tableoption.tableBorder"
                tooltip-effect="dark"
                style="width: 100%"
                header-cell-class-name="table-text-c"
                cell-class-name="table-text-c">
          <el-table-column
                  prop="id"
                  label="序号"
                  width="50">
          </el-table-column>
          <el-table-column
                  prop="name"
                  label="类目名称">
          </el-table-column>
          <el-table-column
                  label="操作"
                  width="250">
            <template slot-scope="scope">
              <el-button size="small" @click="editFoodCate(scope.$index)">编辑</el-button>
              <el-button type="danger" size="small" @click="detelFoodCate(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!--工具条 分页-->
    <el-col :span="24" class="toolbar">
      <el-pagination
              background
              :page-size="page.pagesize"
              :current-page="page.pageindex"
              layout="total, prev, pager, next"
              :total="page.total"
              @current-change="handleSizeChange"></el-pagination>
    </el-col>
    <!--添加，编辑菜品类目-->
    <footcate :dialogType='dialogType' :cateName="cateName" :visible.sync="dialogImgVisible"
              @initPage="initPage" :cateId="cateId"></footcate>
  </div>
  </div>
</template>

<script>
  import footcate from '@/components/dialog/footcate.vue'
  import api from '@/utils/api.js'
  import {pagination, tableoption, yeartime} from '@/utils/util.js'

  export default {
    components: {
      footcate
    },
    data () {
      return {
        tableoption: tableoption,
        page: {
          pageindex: pagination.pageIndex,
          pagesize: pagination.pageSize,
          total: pagination.total
        },
        arryList: [], // 数据列表
        searchWord: '',
        // 弹窗
        dialogImgVisible: false,
        editIndex: null,
        cateName: '',
        dialogType: null,
        cateId: null
      }
    },
    created () {
      this.InitFn()
    },
    methods: {
      // 初始化
      InitFn () {
        this.$fetch(api.cate_list, {
          p: this.page.pageindex
        }).then((response) => {
          if (response.code === 0) {
            for (let i in response.list.data) {
              response.list.data[i].create_time = yeartime(response.list.data[i].create_time)
            }
            this.arryList = response.list.data
            this.page.total = response.list.total
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      initPage (option) {
        if (this.dialogType === 'add') {
          this.InitFn()
        } else {
          this.arryList[this.editIndex].name = option
        }
      },
      // 分页
      handleSizeChange (val) {
        this.page.pageindex = val
        this.InitFn()
      },
      // 删除
      detelFoodCate (index) {
        let this_ = this
        this.$confirm('此操作将永久删除 ' + this.arryList[index].name + ' 类目, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          closeOnClickModal: false,
          type: 'warning'
        }).then(() => {
          this_.deletFn(index)
        }).catch(() => {
        })
      },
      deletFn (index) {
        this.$post(api.cate_delete, {
          id: this.arryList[index].id
        }).then((response) => {
          if (response.code === 0) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.InitFn()
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      // 编辑
      editFoodCate (index) {
        this.dialogType = 'edit'
        this.cateName = this.arryList[index].name
        this.editIndex = index
        this.cateId = this.arryList[index].id
        this.dialogImgVisible = true
      },
      addFoodCate () {
        this.dialogType = 'add'
        this.dialogImgVisible = true
      }
    },
    mounted () {
    }
  }
</script>

